<template>
  <!--未通过详情-->
  <div>
    <wv-group class="mymsg">
      <wv-cell :title="'上传时间：'+deposit.createDate" v-if="deposit.isCheck==1" value="待审核" class="state"></wv-cell>
      <wv-cell :title="'上传时间：'+deposit.createDate" v-if="deposit.isCheck==2" value="已通过" class="state"></wv-cell>
      <wv-cell :title="'上传时间：'+deposit.createDate" v-if="deposit.isCheck==3" value="未通过" class="state"></wv-cell>
      <wv-cell title="存款金额" :value="deposit.amount"></wv-cell>
      <wv-cell title="存款银行" :value="deposit.depositBank"></wv-cell>
    </wv-group>
    <div class="beizhu first">
      <p class="title">备注</p>
      <div>{{deposit.remark}}</div>
    </div>
    <div class="beizhu"  v-if="deposit.isCheck==2">
      <p class="title">上传凭证</p>
      <div><img :src="deposit.voucherImg | imgPathFilter" width="100%"></div>
    </div>
    <div class="beizhu" @click="showUpload()" v-if="deposit.isCheck==3">
      <p class="title">上传凭证</p>
      <div><img src="../../../assets/upload.png" v-if="deposit.voucherImg==''" width="36"> <img :src="deposit.voucherImg | imgPathFilter" width="100%" v-else></div>
    </div>
    <div class="beizhu" v-if="deposit.isCheck==3">
      <p class="title">原因回馈</p>
      <div>{{deposit.reason}}</div>
    </div>
    <p class="offer" @click="againSubmit(deposit)" v-if="deposit.isCheck==3">修改并提交</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {cunkuanjiluDetail, uploadImg, updateCunkuanjilu} from '../../../../test/unit/http'
  import {wxApi} from '../../../../test/unit/flyme_weixin'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        deposit: {}
      };
    },
    methods: {
      againSubmit(deposit){
        updateCunkuanjilu(deposit).then(res => {
          console.log(res);
          if(res.code==100){
            this.$router.push('cunkuanjilu');
          }else{
            Toast.fail(res.info);
          }
        })
      },
      showUpload () {
        this.initChooseImageWxapi();
      },
      initChooseImageWxapi(){
        var that = this;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            var imgId = res.serverId;
            let params = {
              'pojoName': 'deposit',
              'businessKey': '',
              'imgId': imgId
            };
            uploadImg(params).then(res => {
              if (res.code == 100) {
                that.deposit.voucherImg = res.object.filePath;
              } else {
                Toast.fail('上传失败');
              }
            })
          }
        });
      }
    },
    created() {
      wxApi.init();
      var depositId = this.$route.query.depositId;
      cunkuanjiluDetail({depositId: depositId}).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.deposit = res.object;
        } else {
          Toast.fail(res.info)
        }
      })
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f98e3c;
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 999;
  }

  .first {
    border-top: 1px solid #e5e5e5;
  }

  .beizhu {
    text-align: left;
    padding: 10px 0 60px;
    margin: 0 15px;

    .title {
      color: #111;
      font-size: 17px;
      margin-bottom: 10px;
    }
    div {
      color: #999;
      img {
        margin-bottom: 10px;
      }
    }
  }
</style>
